<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :model="queryParams" ref="queryFormRef" :inline="true" class="search-bar">
      <el-form-item label="关键字" prop="keywords">
        <el-input v-model="queryParams.keywords" placeholder="标题" clearable style="width: 220px;" />
      </el-form-item>
      
      <el-form-item label="类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择类型" clearable style="width: 120px;">
          <el-option label="MQTT" value="MQTT" />
          <el-option label="HTTP" value="HTTP" />
          <el-option label="OLTP" value="OLTP" />
        </el-select>
      </el-form-item>

      <el-form-item label="级别" prop="level">
        <el-select v-model="queryParams.level" placeholder="请选择级别" clearable style="width: 120px;">
          <el-option label="ERROR" value="ERROR" />
          <el-option label="WARN" value="WARN" />
          <el-option label="INFO" value="INFO" />
        </el-select>
      </el-form-item>

      <el-form-item label="状态" prop="status" style="width: 160px;">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option label="未处理" value="0" />
          <el-option label="已处理" value="1" />
        </el-select>
      </el-form-item>

      <el-form-item label="时间范围">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleQuery">
          <el-icon><Search /></el-icon>搜索
        </el-button>
        <el-button @click="resetQuery">
          <el-icon><Refresh /></el-icon>重置
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table
      v-loading="loading"
      :data="errorLogList"
      border
      style="width: 100%"
    >
      <el-table-column prop="title" label="标题" show-overflow-tooltip />
      <el-table-column prop="type" label="类型" width="100" />
      <el-table-column prop="level" label="级别" width="100">
        <template #default="{ row }">
          <el-tag :type="getLevelType(row.level)">{{ row.level }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === '0' ? 'danger' : 'success'">
            {{ row.status === '0' ? '未处理' : '已处理' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" width="180" />
      <el-table-column prop="stopTime" label="结束时间" width="180" />
      <el-table-column prop="content" label="内容" show-overflow-tooltip />
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="{ row }">
          <el-button
            v-if="row.status === '0'"
            link
            type="primary"
            @click="handleClose(row)"
          >标记处理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      v-if="total > 0"
      :total="total"
      v-model:current-page="queryParams.cur"
      v-model:page-size="queryParams.limit"
      class="pagination"
      @current-change="getErrorLogList"
      @size-change="getErrorLogList"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { FormInstance } from 'element-plus';
import DataErrorLogAPI from '@/api/biz/DataErrorLog';
import type { ErrorLog, ErrorLogQuery } from '@/api/biz/DataErrorLog';

const loading = ref(false);
const total = ref(0);
const errorLogList = ref<ErrorLog[]>([]);
const queryFormRef = ref<FormInstance>();
const dateRange = ref<[string, string]>();

// 查询参数
const queryParams = reactive<ErrorLogQuery>({
  keywords: '',
  type: '',
  level: '',
  status: '',
  startTime: '',
  endTime: '',
  cur: 1,
  limit: 10
});

// 监听日期范围变化
watch(dateRange, (val) => {
  queryParams.startTime = val?.[0] || '';
  queryParams.endTime = val?.[1] || '';
});

// 获取错误日志列表
const getErrorLogList = async () => {
	loading.value = true;
	DataErrorLogAPI.getErrorLogPage(queryParams)
	  .then((data:any) => {
		errorLogList.value = data.list;
		total.value = data.totalRow;
	  })
	  .finally(() => {
	    loading.value = false;
	  });
};

// 搜索
const handleQuery = () => {
  queryParams.cur = 1;
  getErrorLogList();
};

// 重置
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  dateRange.value = undefined;
  queryParams.cur = 1;
  getErrorLogList();
};

// 标记处理
const handleClose = (row: ErrorLog) => {
  ElMessageBox.confirm('确认要标记该错误日志为已处理吗？', '提示', {
    type: 'warning'
  }).then(async () => {
    await DataErrorLogAPI.closeErrorLog(row.id);
    ElMessage.success('操作成功');
    getErrorLogList();
  });
};

// 获取级别对应的标签类型
const getLevelType = (level: string) => {
  const map: Record<string, string> = {
    'error': 'danger',
    'warning': 'warning',
    'info': 'info'
  };
  return map[level] || 'info';
};

// 初始化
getErrorLogList();
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>